<template>
  <div class="q-pa-md q-gutter-sm">
    <t-advanced-editor ref="editor" label="111111" :enableComment="true" v-model="test11111"></t-advanced-editor>
    <button @click="changeData">改变editor值</button>
    <button @click="getData">打印editor值</button>
    <button @click="insertHTML('<b>哈哈哈哈哈</b>')">插入html</button>
  </div>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const editor = ref();
    const changeData = () => {
      editor.value.setData('<i>1111111<i>')
    }
    const getData = () => {
      console.log(test11111.value)
      if (test11111.value) {
        test11111.value = test11111.value.replace(/<mark/ig, '<span').replace(/<\/mark>/ig, '</span>')
      }
      console.log(test11111.value)
      localStorage.setItem('test11111', test11111.value)
    }
    const insertHTML = (e) => {
      editor.value.insertHTML('<span style="color:red">55555<span>')
    }
    var regex = /<span[^>]*class="dataColorMark"[^>]*>([^<]+)<\/span>/gi;

    // 执行匹配
    var matches = [];
    var match;
    while ((match = regex.exec(localStorage.getItem('test11111'))) !== null) {
      matches.push(match[0]);
    }
    let renderData = localStorage.getItem('test11111')
    // 输出所有匹配结果
    if (matches.length > 0) {
      console.log('匹配到的标签列表:', matches);
      matches.forEach(item => {
        renderData =renderData .replace(item, item.replace(/<span/ig,'<mark').replace(/<\/span>/ig,'</mark>'))
      })
    } else {
      
    }
    const test11111 = ref(renderData || '')
    return {
      editor,
      changeData,
      insertHTML,
      test11111,
      getData
    };
  },
};
</script>
